import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from 'react-router-dom'

function LoginInfo(params) {
  console.log(params)
  if (params.location.state.loginState === 'success') {
    return <Redirect to="/home"></Redirect>
  }
  return <Redirect to="/login"></Redirect>
}

var formCom = () => {
  let pathObj = {
    pathname: '/logininfo',
    state: {
      loginState: 'success'
    }
  }
  return () => (
    <div>
      表单验证
      <Link to={ pathObj }>登录验证后页面</Link>
    </div>
  )
}

class App extends React.Component {
  render () {
    return (
      <div>
        <Router>
          {/* 匹配成功后, 不会再继续往下匹配, home显示一个; 否则home页面显示两个 */}
          <Switch>
            <Route path="/" exact component={() => (<div>首页</div>)}></Route>
            <Route path="/form" exact component={ formCom() }></Route>
            <Route path="/login" exact component={() => (<div>登录页</div>)}></Route>
            <Route path="/home" exact component={() => (<div>主页面1, 登录成功</div>)}></Route>
            <Route path="/home" exact component={() => (<div>主页面2, 登录成功</div>)}></Route>
            <Route path="/logininfo" exact component={ LoginInfo }></Route>
          </Switch>
        </Router>
      </div>
    )
  }
}

export default App
